<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<c-header>
			<view class="header" slot="header">
				<view class="title">消息</view> 
			</view>
		</c-header>
		<view  class="body">
			<view class="h45">
				<view class="fix-wrap"> 
					<view class="h45">
						<view class="search-area">
							<view class="search-form">
								<view class="icon iconfont f-s44">&#xe622;</view>
								<input type="text" v-model="params.search" class="sc-inp" @confirm="search">
								<view v-if="params.search" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
							</view> 							 
						</view> 
					</view> 
				</view>
			</view> 
			
			
			<template >
				<template v-if="list.length>0">
					<view class="sp-list-wrap">
						<view class="item" v-for="(item,index) in list" :key="index" @click="read(index)">
							<view class="type">
								<text v-if="item.apply_type == 3">需求</text>
								<text v-if="item.apply_type == 1 || item.apply_type == 4 || item.apply_type == 5"> 入库 </text>
								<text v-if="item.apply_type == 2"> 出库 </text>
								<text v-if="item.apply_type == 6"> 仓库 </text>
							</view>
							<view class="info">
								<view class="content split-line">{{item.notice}}</view>
								<view class="time">{{item.create_time}}</view>
							</view>
							<view v-if="item.notice_status==1" class="status">未读</view> 
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
					</view> 
				</template> 
				
				<c-empty v-else></c-empty>
			</template>
		</view> 
		<view class="all-read" @click="allread"><text>全部已读</text></view>
		<c-nav-kucun :switchTab="4"></c-nav-kucun>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false, 
				isIphoneX:getApp().globalData.isIphoneX,				
				list:[],
				total:0, 
				loadingState:{
					default:false,
					loading:false,
					completed:false
				},
				params:{
					page:1,
					limit:15,
					search:'', 
				}
			}
		},
		onLoad() {  
			this.getMessageList()		
		},
		onShow() {
			
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				this.params.page++;
				this.getMessageList(); 
			}	 
		},
		methods: { 
			search(){ 
				this.list=[];
				this.params.page=1;
				this.getMessageList(); 
			},
			
			clearKeyword(){
				this.list=[];
				this.params.page=1;
				this.params.search='';
				this.getMessageList(); 
			},
			
			async getMessageList(){ 
				let res=await this.$api.user_api.meunreadlist(this.params);    
				if(res.data.code==200){  
					this.list=this.list.concat(res.data.data);	
					if(res.data.data.list.length<=this.params.limit){
						this.loadingState.completed=true;
					} 
				}
			}, 
			async read(idx){
				let id=this.list[idx].id;					 
				let res=await this.$api.user_api.meoneread({
					id:id
				}) 
				if(res.data.code==200){
					this.list[idx].notice_status=2;
				}
				uni.navigateTo({
					url:`/package_kucun/msg-detail/msg-detail?notice_id=${id}&apply_id=${this.list[idx].apply_id}`
				})
			},
			
			async allread(){
				let res=await this.$api.user_api.meallread();
				if(res.data.code==200){
					this.list=[];
					this.params.page=1;
					this.getMessageList(); 
				}
			}
			
		},
		computed:{
			 
		},
		watch:{
			 
		}
	}
</script>

<style lang="less">
	.page{
		// background: #fff;
	}  
	.sp-list-wrap{
		padding:20rpx 0;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx;
			margin-bottom: 10rpx;
			background: #fff; 
			border-top: 1rpx solid #e5e5e5;
			border-bottom:1rpx solid #e5e5e5; 
			.type{
				flex-shrink: 0; 
				width: 110rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx; 
				background: #cbc5c7;
				border-radius: 48rpx;
				text-align: center;
				color:#fff;
			}
			.info{
				flex-grow: 2;
				.content{
					padding:0 20rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color:#999;
				}
				.time{
					padding:0 15rpx 15rpx; 
					font-size: 28rpx;
					color:#999;
				}
			}
			.status{
				border-radius: 48rpx;
				flex-shrink: 0;
				width: 110rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				text-align: center;
				background: #f33632;
				color:#fff;
			}			 
		}
	}
 
	.all-read{
		position: fixed;
		left:30rpx;
		bottom:120rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #d72b29;
		border-radius: 50%;
		color: #fff;
		font-size: 28rpx;
		text{			
			width: 70rpx; 
			text-align: center;
		}
	}
	.msg-type-list{
		// padding: 20rpx 0 0;
		background: #fff;
		margin-bottom: 20rpx;
		.item{
			display: flex;
			align-items: center;
			padding:0 0 0 20rpx;
			.icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
				margin-right: 20rpx; 
				image{
					width: 100%;
				}
			}
			.content{
				display: flex;
				align-items: center;
				flex-grow: 2;
				padding:25rpx 20rpx 25rpx 0;
				border-bottom: 1rpx solid #eee; 
				.left{
					flex-grow: 2;
					.ft{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;
						.name{
							font-size: 30rpx;
							font-weight: bold;
						}
						.time{
							color:#999;
							font-size: 28rpx;
						}
					}
					.fb{
						font-size: 28rpx;
						color:#999;
					}
				}
				.new-num{
					flex-shrink: 0;
					min-width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background-color: #f00;
					border-radius: 50%;
					font-size: 26rpx;
					color:#fff;
				}
				
			}
		}
	}
</style>
